<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2D转换之位移</title>
  <style>
    /* 移动盒子的位置：1.定位 2.盒子的外边距 3.2d转换移动 */
    div {
      /* 2. 子绝父相 */
      position: relative;
      width: 500px;
      height: 500px;
      background-color: pink;

      /* 1.在translate中是可以使用百分号的：根据盒子自身的宽度或者高度来对比 */
      /* 向x轴移动盒子自身百分之五十的距离，这里的50%就是100像素 因为盒子的宽度就是200像素 */
      /* transform: translate(50%); */
    }

    /* 小案例：实现水平居中与垂直居中 */
    div p {
      /* 1. 给p标签添加绝对定位 */
      position: absolute;
      top: 50%;
      left: 50%;
      /* 3. 因为给盒子设置距离头部与左侧各50%的位置加上盒子自身的大小会出现偏下的情况 */
      /* 这个时候移动盒子的距离x轴相反位置自身盒子大小的一半: 水平居中 */
      /* 距离y轴相反位置自身盒子大小的一半：垂直居中 */
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background: purple;
    }

    span {
      /* transform: translate 对于行内元素无效哦 */
      transform: translate(100px, 100px);
    }
  </style>

</head>

<body>

  <div>
    <p></p>
  </div>

  <span>123</span>

</body>

</html>